import React, { useState } from 'react';
import UserAvatar from './UserAvatar';

const ChatBox = () => {
  const [messages, setMessages] = useState<string[]>([]);
  const [inputMessage, setInputMessage] = useState('');

  const sendMessage = () => {
    if (inputMessage.trim()!== '') {
      setMessages((prevMessages) => [...prevMessages, inputMessage]);
      setInputMessage('');
    }
  };

  return (
    <div>
      <div style={{ height: '400px', overflowY: 'scroll', padding: '10px' }}>
        {messages.map((message, index) => (
          <div key={index} style={{ display: 'flex', marginBottom: '10px' }}>
            <UserAvatar />
            <div style={{ padding: '5px 10px', borderRadius: '10px', backgroundColor: '#f0f0f0' }}>{message}</div>
          </div>
        ))}
      </div>
      <input
        type="text"
        value={inputMessage}
        onChange={(e) => setInputMessage(e.target.value)}
      />
      <button onClick={sendMessage}>发送</button>
    </div>
  );
};

export default ChatBox;